<template>
<div>
	<h3 class="base-title">使用方法</h3>
	<p class="base-content">直接通过设置类名为 bh-icon-iconName 来使用即可。</p>

	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<bh-icon name='edit'></bh-icon>
			<bh-icon name='share'></bh-icon>
			<bh-icon name='delete'></bh-icon>
			<bh-button type="primary" icon="bh-icon-search">搜索</bh-button>
		</div>
		<div class="demo-block-core">
			<textarea class="demo-core-box" readonly="readonly" v-model="caseSourceVal" style='height: 80px;'></textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>

	<div class="collect-block">
		<h3 class="base-title">图标集合</h3>
		<ul class="icon-list">
			<li>
				<bh-icon name='edit'></bh-icon>
				<div class="icon-name">bh-icon-edit</div>
			</li>
			<li>
				<bh-icon name='share'></bh-icon>
				<div class="icon-name">bh-icon-share</div>
			</li>
			<li>
				<bh-icon name='delete'></bh-icon>
				<div class="icon-name">bh-icon-delete</div>
			</li>
			<li>
				<bh-icon name='search'></bh-icon>
				<div class="icon-name">bh-icon-search</div>
			</li>

			<li>
				<bh-icon name='back'></bh-icon>
				<div class="icon-name">bh-icon-back</div>
			</li>
			<li>
				<bh-icon name='right'></bh-icon>
				<div class="icon-name">bh-icon-right</div>
			</li>
			<li>
				<bh-icon name='bottom'></bh-icon>
				<div class="icon-name">bh-icon-bottom</div>
			</li>
			<li>
				<bh-icon name='top'></bh-icon>
				<div class="icon-name">bh-icon-top</div>
			</li>
		</ul>
	</div>
</div>
</template>

<script>
const caseSourceVal = `
<bh-icon name='edit'></bh-icon>
<bh-icon name='share'></bh-icon>
<bh-icon name='delete'></bh-icon>
<bh-button type="primary" icon="bh-icon-search">搜索</bh-button>
`;
export default {
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/ExvaeZx',
			},
			caseSourceVal: caseSourceVal,
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		},
	},
}
</script>

<style scoped>
.demo-block .demo-block-source > i{ margin: 0 20px; font-size: 20px;}
.icon-list{ display: flex; flex-wrap: wrap; width: 864px; border: 1px solid #eee;}
.icon-list > li{ width: 144px; height: 100px; text-align: center; padding-top: 40px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; margin-right: -1px; margin-bottom: -1px;}
.icon-list > li > i{ font-size: 32px;}
.icon-list > li .icon-name{ margin-top: 15px; }
.icon-list > li:hover{ color: #409eff; }
</style>
